<template>
	<view style="width:100%;position:relative;">
		<image :src="noteList.image" style="position: absolute;top:0;left: 0;width: 100%;" mode=""></image>
		<view class="header">
			<view class="flex" style="font-size: 44rpx;line-height: 44rpx;justify-content: space-between;">
				<text>{{noteList.projectName}}</text>
				<!-- 设计师 -->
				<!-- <view v-if="type == 1">
					<switch color="#056de8" ref="status" name="switch" @change="switchChange"
						:checked="storeinfo.wechat==1 ? 1:0" />
					<view style="font-size: 28rpx;color: #1e1e1e4D;text-align: center;">{{status}}</view>
				</view> -->
			</view>
			<view class="title_" style="color: rgba(30, 30, 30, 0.3);">
				<text>面积</text>
				<text>风格</text>
				<text>开工时间</text>
			</view>
			<view class="title_l" style="color:#1E1E1E;">
				<text>{{noteList.area}}m²</text>
				<text>{{noteList.style}}</text>
				<text>{{noteList.starTime}}</text>
			</view>
		</view>
		<!-- 进程 -->
		<view class="progress">
			<view style="font-size: 36rpx;line-height: 44rpx;">
				进程
			</view>
			<view class="progress_">
				<view class="flex ">
					<view class="icon">
						<view v-if="6>noteList.status>= 1 || noteList.status == 1">
							<image src="/clientEnd/static/desgin/7956.png" mode=""></image>
							<view style="font-size: 32rpx;">测量</view>
						</view>
						<view v-show>
							<image src="/clientEnd/static/desgin/7956_.png" mode=""></image>
							<view style="font-size: 32rpx;color: rgba(30,30,30,0.3);">测量</view>
						</view>
					</view>
					<view class="icon">
						<image v-if="noteList.status>1" src="/clientEnd/static/desgin/7760.png" mode="">
						</image>
						<image v-show="noteList.status =='' || noteList.status == 1 || noteList.status > 5"
							src="/clientEnd/static/desgin/7761.png" mode=""></image>
					</view>
					<view class="icon">
						<view v-if="noteList.status != 1 ">
							<image src="/clientEnd/static/desgin/7957.png" mode="">
							</image>
							<view style="font-size: 32rpx;">设计</view>
						</view>
						<view v-show="noteList.status == ''|| noteList.status<2 || noteList.status > 5">
							<image src="/clientEnd/static/desgin/7957_.png" mode=""></image>
							<view style="font-size: 32rpx;color: rgba(30,30,30,0.3);">设计
							</view>
						</view>
					</view>
					<view class="icon">
						<image v-if="noteList.status>2" src="/clientEnd/static/desgin/7760.png" mode="">
						</image>
						<image v-show="noteList.status =='' || noteList.status < 3 || noteList.status > 5"
							src="/clientEnd/static/desgin/7761.png" mode="">
						</image>
					</view>
					<view class="icon">
						<view v-if="noteList.status > 2">
							<image src="/clientEnd/static/desgin/7959.png" mode=""></image>
							<view style="font-size: 32rpx;">复尺</view>
						</view>
						<view v-show="noteList.status < 3 || noteList.status == ''||noteList.status>6">
							<image src="/clientEnd/static/desgin/7959_.png" mode=""></image>
							<view style="font-size: 32rpx;color: rgba(30,30,30,0.3);">复尺</view>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="icon">
						<view v-if="noteList.status> 4 || noteList.status == 4">
							<image src="/clientEnd/static/desgin/7962.png" mode="">
							</image>
							<view style="font-size: 32rpx;">工厂生产
							</view>
						</view>
						<view v-show="noteList.status < 4 || noteList.status == ''||noteList.status>6">
							<image src="/clientEnd/static/desgin/7962_.png" mode="">
							</image>
							<view style="font-size: 32rpx;color: rgba(30,30,30,0.3);">工厂生产
							</view>
						</view>
					</view>
					<view class="icon">
						<image v-if="noteList.status == 5" src="/clientEnd/static/desgin/7760.png" mode="">
						</image>
						<image v-show="noteList.status ==''|| noteList.status != 5"
							src="/clientEnd/static/desgin/7761.png" mode="">
						</image>
					</view>
					<view class="icon">
						<view v-if="noteList.status==5">
							<image src="/clientEnd/static/desgin/7963.png" mode="">
							</image>
							<view style="font-size: 32rpx;">安装验收</view>
						</view>
						<view v-show="noteList.status !=5">
							<image src="/clientEnd/static/desgin/7963_.png" mode="">
							</image>
							<view style="font-size: 32rpx;color: rgba(30,30,30,0.3);">安装验收
							</view>
						</view>


					</view>
				</view>
			</view>
			<view @click="addNotes()" class="add">
				添加笔记
			</view>
			<view class="design" v-for="(item, index) of designList" :key="index">
				<view style="font-size: 36rpx;line-height: 44rpx;display: flex;justify-content: space-between;">
					<view>
						<image v-if="!index[0]" style="vertical-align:middle;width:64rpx;height:64rpx;"
							src="../../../static/me/design.png" mode=""></image>
						<image v-if="index[0]" style="vertical-align:middle;width:64rpx;height:64rpx;"
							src="../../../static/me/designs.png" mode=""></image>
						<text v-if="item.status == 1">测量</text>
					 <text v-if="item.status == 2">设计</text>
						<text v-if="item.status == 3">复尺</text>
						<text v-if="item.status == 4">工厂生产</text>
						<text v-if="item.status == 5">安装验收</text>
					</view>
					<view style="font-size: 28rpx;color: rgba(30,30,30,0.3);margin:auto 0;">
						{{item.createTime}}
					</view>
				</view>
				<view class="eee">
					<view class="cont_" style="border-left: 2rpx dashed rgba(30, 30, 30, 0.1);margin-left: 32rpx;">
						<view v-if="item.content != ''" class="cont">
							{{item.content}}
						</view>
						<view class="imgs">
							<u-album :urls="item.image" keyName="src2" space="5"></u-album>
						</view>
					</view>
					<view class="yuan"></view>
					<view class="cont"
						style="height:50rpx;margin-left: 32rpx;border-left: 2rpx dashed rgba(30, 30, 30, 0.1);"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// switch
				storeinfo: {
					wechat: 0
				},
				status: '未公开',
				// 详情
				noteList: [],
				// 笔记
				designList: [],
				type: '',
				orderNum: '',
				Id: ''
			}
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
			this.orderNum = e.orderNum
			this.Id = e.Id
			this.getNoteDetails()
			console.log('呆呆鸟的', this.orderNum)
		},
		created() {
			this.getNoteDetails()
		},
		methods: {
			// 项目笔记详情
			getNoteDetails() {
				let data = {
					projectNum: this.orderNum
				}
				this.$api.projectNoteDetails(data).then((res) => {
					res.data.result.starTime = this.$tools.fileTime(res.data.result.starTime).slice(0, 10)
					res.data.result.projectNotes.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime).slice(0, 10)
						item.image = item.image.split(',')
					})
					this.noteList = res.data.result
					this.designList = res.data.result.projectNotes
					// this.storeinfo.wechat = this.designList.status
					// console.log('项目详情', this.storeinfo.wechat)
				})
			},
			switchChange(e) {
				// 点击开关的时候看value值得变化
				console.log('开关选择器', e.target.value)
				// 如果e.target.value==true的时候,就给storeinfo里面的变量赋值为1,否则为0
				if (e.target.value) {
					this.storeinfo.wechat = 1;
					this.status = "公开";
				} else {
					this.storeinfo.wechat = 0
					this.status = "未公开";
				}
				let data = {
					id: this.Id,
					status: this.storeinfo.wechat
				}
				this.$api.overt(data).then((res) => {
					console.log('switchChange', res)
				})
			},
			// 添加笔记
			addNotes() {
				this.$tools.goPageNoAuth('/clientEnd/page/design/ProjectNotes?orderNum=' + this.orderNum)
			}
		}
	}
</script>

<style scoped>
	.add {
		width: 624rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx dashed rgba(73, 45, 34, 0.3);
		font-size: 32rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #492D22;
		text-align: center;
		line-height: 120rpx;
		margin-left: ;
		margin: 20rpx 30rpx;
	}

	.icon {
		text-align: center;
		margin-top: 25rpx;
	}

	.icon image {
		margin: 0 35rpx;
		width: 64rpx;
		height: 64rpx;
	}

	/* .eee:first-child .yuan{
		background-color:yellow;
	} */
	.yuan:first-child {
		border: none !important;
	}

	/* .cont:first-child {
		border-left: none;
	} */
	.imgs image {
		width: 162rpx;
		height: 162rpx;
		margin-right: 14rpx;
		margin-top: 14rpx;
		border-radius: 8rpx;
	}

	.imgs {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0 0 32rpx;

	}

	.yuan {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(30, 30, 30, 0.1);
		margin: 10rpx 10rpx 10rpx 26rpx;
	}

	.cont {
		line-height: 36rpx;
		font-size: 28rpx;
		width: 634rpx;
		padding: 30rpx 0 0 32rpx;


	}

	.design {
		margin-top: 30rpx;
	}

	.progress_ {
		margin-top: 20rpx;
		height: 308rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(30, 30, 30, 0.1);
		padding: 0 30rpx;
	}

	.progress {
		width: 100%;
		margin-top: 560rpx;
		background-color: #fff;
		padding: 30rpx;
		position: absolute;
		font-weight: 500;
	}

	.header {
		width: 100%;
		height: 308rpx;
		position: absolute;
		top: 230rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
	}

	.title_,
	.title_l {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
		text-align: left;
	}

	.title_ text,
	.title_l text {
		line-height: 44rpx;
		font-size: 32rpx;
	}
</style>
